<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello vue</title>
</head>
<body>
<div id="app">
    <component1></component1>
    <component1></component1>
    <component1></component1>
</div>

<template id="component1">
    <div>
        <h2>数值：{{num}}</h2>
        <button @click="add">+</button>
        <button @click="subtract">-</button>
    </div>
</template>

</body>
<script src="../css/vue.js"></script>
<script>
    /**
     * 为什么组件的data是一个函数,官网说：一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝
     * 我们都是知道，对象一单创建就会指定一个地址，每个人去用这个对象的时候，都是修改对象的属性值，地址是不是改变了，
     * 然后回想一下，组件的使用很多时候都是要复用的，你复用的时候，都会想着每个组件的数据都是单独维护的，不要相互影响
     * 如果对象都是只是创建一次，那就会出问题了，现在有一个组件使用了两次，data内存地址都是一个，那一个组件修改了data，另一个组件的值也会跟着改变，只是我们最不想看到的情况
     * 那data是一个函数的话，函数每次返回的对象都是一个新对象，这样就保持了每个组件的对象都不想相互影响
     */
    const component1 = {
        template: '#component1',
        data() {
            return {num: 0}
        },
        methods: {
            add() {
                this.num++;
            },
            subtract() {
                this.num--;
            }
        }
    }

    const app = new Vue({
        el: '#app',
        components: {
            'component1': component1
        }
    })

</script>
</html>